<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>带输入提示的输入框控件</title>

<!-- 运行sample时，请根据实际的layui库所处位置修改链接地址 -->
<link rel="stylesheet" href="https://unpkg.com/layui@2.9.9/dist/css/layui.css">
<!-- 引入tyepeahead.css文件 -->
<link rel="stylesheet" href="typeahead.css">

</head>
<body>

<div class="layui-container layui-form-item" style="padding: 30px 0;">
    <blockquote class="layui-elem-quote" style="color: #666;">
      请自行下载Layui库，支持2.8.x,2.9.x版本Layui库，其他版本未测试.
    </blockquote>
	<div class="layui-inline">
		<label class="layui-form-label">科技公司</label>
		<div class="layui-input-block">
			<input id="supplier" name="supplier" type="text" lay-verify="" placeholder="请输科技公司名称" class="layui-input">
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label">石油公司</label>
		<div class="layui-input-block">
			<input id="oilComp" name="oilComp" type="text" lay-verify="" placeholder="请输石油公司名称" class="layui-input">
        </div>
	</div>
</div>

<!-- 运行sample时，请根据实际的layui库所处位置修改链接地址 -->
<script src="https://unpkg.com/layui@2.9.9/dist/layui.js"></script>
<script>
layui.config({
    base:'./'
}).extend({
    typeahead: 'typeahead'
});
layui.use(['typeahead'], function(){
    var $ = layui.$;
    var typeahead = layui.typeahead;

    // test data
    var testData = [
        {"value":"001","text":"华三网络通信有限公司"},
        {"value":"002","text":"华为科技有限公司"},
        {"value":"003","text":"小米科技有限公司"},
        {"value":"004","text":"AAAAA公司"},
        {"value":"005","text":"BBBBB公司"},
        {"value":"006","text":"CCCCC公司"},
        {"value":"007","text":"DDDDD公司"},
        {"value":"008","text":"EEEEE公司"},
        {"value":"009","text":"FFFFF公司"},
        {"value":"010","text":"GGGGG公司"},
        {"value":"011","text":"HHHHH公司"},
        {"value":"012","text":"IIIII公司"},
    ];
    var testData1 = ['中石油','中石化','中海油',];

    // 渲染科技公司输入控件
    typeahead.render({
        elem: '#supplier',
        source: function(query, process) {
            // 在此处可以发起ajax请求，从后台取得数据显示在下拉框中
            // sample从预定义的数组中过滤数据
            let result = [];
            layui.each(testData, function(index, item) {
                if (item.text.indexOf(query) >= 0) {
                    result.push(item);
                }
            });
            process(result);
        },
        displayText: function(item) {
            return item.text + '(' + item.value + ')';
        },
        afterSelect: function(item){
            console.log(item);
        }
    });
    // 渲染石油公司输入控件
    typeahead.render({
        elem: '#oilComp',
        source: testData1,
        afterSelect: function(item){
            console.log(item);
        }
    });
	
});
</script>
</body>
</html>
